<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-input-block{margin-left: 100px;}
    .layui-inline{margin-bottom: 10px;}
</style>
<body>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">订单结算</a>
            <a><cite>订单明细</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" id="reload" title="刷新">
        <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
    </a>
</div>
<!-- <blockquote class="layui-elem-quote">非实时，延迟1分钟左右更新</blockquote> -->
<div class="x-body">
    <form class="layui-form" id = 'handle-form' lay-filter="searchForm">
        <div class="layui-inline">
            <label class="layui-form-label w-auto">订单号：</label>
            <div class="layui-input-block">
                <input type="text" name="order_no" placeholder="请输入订单号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">用户ID：</label>
            <div class="layui-input-block">
                <input type="text" name="uid" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">链接ID：</label>
            <div class="layui-input-block">
                <input type="text" name="link_id" placeholder="请输入推广链接ID" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">计划ID：</label>
            <div class="layui-input-block">
                <input type="text" name="advertiser_id" placeholder="请输入投放计划ID" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">充值金额：</label>
            <div class="layui-input-block">
                <input type="text" name="total_fee" placeholder="请输入充值金额" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">下单时间：</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="consume_date" id="consume_date" placeholder="选择时间">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">支付状态：</label>
            <div class="layui-input-block">
                <select name="status" id="status">
                    <option value="">请选择</option>
                    <option value="0">未支付</option>
                    <option value="1">已支付</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">订单来源：</label>
            <div class="layui-input-block">
                <select name="source" id="source">
                    <option value="">请选择</option>
                    <option value="1">微信小程序</option>
                    <option value="2">抖音小程序</option>
                    <option value="3">快手小程序</option>
                    <option value="4">微信公众号</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">选择短剧：</label>
            <div id="pMenu" style="width:100%;flex:1"></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">充值类型：</label>
            <div id="pRechargeType" style="width:100%;flex:1"></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">激活时间：</label>
            <div class="layui-input-inline" id="time" style="display: flex;align-items: center;">
                <div class="layui-input-inline" style="margin-right:10px">
                    <input type="text" autocomplete="off" name="activation_start_time" id="activation_start_time" class="layui-input"
                            placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" name="activation_end_time" id="activation_end_time" class="layui-input"
                            placeholder="结束日期">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label w-auto">支付时间：</label>
            <div class="layui-input-inline" id="time1" style="display: flex;align-items: center;">
                <div class="layui-input-inline" style="margin-right:10px">
                    <input type="text" autocomplete="off" name="pay_start_time" id="pay_start_time" class="layui-input"
                            placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" name="pay_end_time" id="pay_end_time" class="layui-input"
                            placeholder="结束日期">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="searchList" style="margin-left:5px">搜索</button>
            <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" id="leading-out" class="layui-btn layui-btn-normal">导出</button>
        </div>
    </form>
    <table id="detailedList" lay-filter="detailedList"></table>
</div>
<script>
    let totalObj = {user_num:''}
    
    let selectParams = {
        url:'/cps/video/select',
        selected:[],
        tips:'选择短剧',
        name: 'video_id',
        field_id:'id',
        field_Name:'name',
        elem: '#pMenu'
    }
    selectN(selectParams)
    let selectRechargeType = {
        url:'/cps/recharge/getRechargeType?type=0',
        selected:[],
        tips:'选择充值类型',
        name: 'type',
        field_id:'id',
        field_Name:'name',
        elem: '#pRechargeType'
    }
    selectN(selectRechargeType)
    $("#leading-out").click(function() {
        var data = $('#handle-form').serialize();

        derive('/cps/order/detailedExcel',data)
    });
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var form = layui.form;

        //常规用法
        laydate.render({
            elem: '#consume_date'
        });
        laydate.render({
            elem: '#time'
            ,type: 'datetime'
            , range: ['#activation_start_time', '#activation_end_time']
            ,format: 'yyyy-MM-dd HH:mm:ss'
        });
        laydate.render({
            elem: '#time1'
            ,type: 'datetime'
            , range: ['#pay_start_time', '#pay_end_time']
            ,format: 'yyyy-MM-dd HH:mm:ss'
        });

        Ajax('/cps/recharge/getRechargeType', {type:0}).then(result => {
            let params = {
                elem: '#detailedList'
                , toolbar: true
                , url: '/cps/order/detailedList' //数据接口
                , id: 'detailedList'
                , page: 12
                , page:true
                , totalRow:true
                , cols: [[ //表头
                    { field: 'id', title: 'ID', width: 90, sort: true, align:'center',totalRowText: '总合计：' }
                    , { field: 'uid', title: '用户ID', width: 100, align:'center' }
                    , { field: 'link_id', title: '链接ID', width: 90, align:'center' }
                    // , { field: 'official_account_id', title: '公众号ID', width: 90}
                    // , { field: 'video_id', title: '短剧ID',width: 80 }
                    , { field: 'video_name', title: '短剧名称', align:'center' }
                    , { field: 'official_account_name', title: '公众号名称',width: 120, align:'center' }
                    , { field: 'advertiser_id', title: '投放计划ID', align:'center', width: 180 }
                    , { field: 'order_no', title: '订单号', width: 180, align:'center'}
                    // , { field: 'wechat_order_no', title: '微信交易单号',width:180 }
                    , { title: '支付类型', width: 100, templet: function (d) {
                            for (let index = 0; index < result.data.length; index++) {
                                const element = result.data[index];
                                if(element.id == d.type){
                                    return element.name
                                }
                            }
                        }, align:'center'
                    }
                    , { field: 'device_type_text', title: '设备类型',width:120, align:'center' }
                    , { field: 'total_fee', title: '支付金额',width:120, align:'center' }
                    , { title: '支付状态', width: 90, templet: function (d) {
                            return d.status == 1 ? '已支付' : '未支付'
                        }, align:'center'
                    }
                    , { field: 'created_at', title: '添加时间',width:160, templet: function (d) {
                            return dayjsFormat(d.created_at)
                        }, align:'center'
                    }
                    , { field: 'pay_time', title: '支付时间',width:160, templet: function (d) {
                            return dayjsFormat(d.pay_time)
                        }, align:'center'
                    }
                    // , { field: 'user_register_time', title: '用户注册时间',width:160, templet: function (d) {
                    //         return dayjsFormat(d.user_register_time)
                    //     }, align:'center'
                    // }
                    , { field: 'activation_time', title: '激活时间',width:160, align:'center'}
                ]],
                customTotal:function(){
                    getTotal('/cps/order/orderListSumRechare',totalObj).then(val=>{
                        totalObj = val
                    })
                },
                done:function(){
                    setPrice(totalObj)
                }
            }
            tableList(params)

        })
    })

    function setPrice(totalObj){
        $('.layui-table-total td[data-field="total_fee"] .layui-table-cell').text(totalObj.total_price);
        $('.layui-table-total td[data-field="order_no"] .layui-table-cell').html(`充值人数：${totalObj.user_num}`);
    }
</script>
</body>

</html>